<template>
  <div class="activity" v-if="list && list.length > 0">
    <div class="wCen animate__fadeInUp ">
      <div class="homeTitle">
        <span class="homeTitle_l">{{ $t("activity-t1") }}</span>
        <span class="homeTitle_r" v-if="localeCn">CONFERENCE & ACTIVITIES</span>
      </div>
      <div class="homeMore" @click="go2Activity">
        <span class="homeMore_r"></span>
      </div>
      <div class="activityList">
        <div class="item hand" v-for="(item, index) in list" :key="index" @click="go2ActivityDetail(item)">
          <div class="imgBox">
            <img :src="item.coverImgUrl" class="img" />
          </div>
          <div class="content">
            <div class="actTitle text_e" :class="isMobile?'text_e-3':'text_e-2'">{{ item.title }}</div>
            <!-- <div class="text">{{ $t("date") }}{{ parseDate(item.startTime) }}</div>
            <div class="text">{{ $t("address") }}{{ item.address }}</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/activity";
export default {
  data() {
    return {
      list: [],
      form: {
        pageSize: 3,
        pageNum: 1,
        isHome: 1,
        orderByColumn: "homeSortOrder",
        isAsc: "asc",
      },
    };
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    getListFun() {
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          this.list = res.rows;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.activity {
  padding-top: 130px;
  padding-bottom: 120px;
  background-color: #fff;
  .homeMore {
    margin-top: 35px;
  }
  .activityList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 85px;

    .item {
      $g: 5%;
      $w: calc((100% - 2 *#{$g}) / 3);
      width: $w;
      overflow: hidden;
      box-sizing: border-box;

      &:not(:last-child) {
        margin-right: $g;
      }

      .imgBox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 265px;
		  border:1px solid #f1f1f1;

        img {
          max-width: 100%;
          max-height: 100%;
          transition: transform 0.2s linear;
        }
      }

      .content {
        padding: 36px 7px 7px 0;

        .actTitle {
          width: 100%;
          font-size: 20px;
          color: #4f4f4f;
        }
      }
      &:hover .img {
        transform: scale(1.02);
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
      padding-top: scale(100px);
      padding-bottom: scale(100px);
      .homeMore {
        margin-top: scale(35px);
      }
      .activityList {
        margin-top: scale(60px);
        .item {
          $g: scale(5%);
          $w: calc((100% - 2 *#{$g}) / 3);
          width: $w;
		
          &:not(:last-child) {
            margin-right: scale($g);
          }
    
          .imgBox {
           
          
            height: scale(290px);
    
          }
    
          .content {
            padding: scale(36px) scale(7px) scale(7px) 0;
    
            .actTitle {
              font-size: scale(20px);
       
            }
			}
          }
         
      }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
	  padding-top: scale(100px);
	  padding-bottom: scale(100px);
	  .homeMore {
	    margin-top: scale(35px);
	  }
	  .activityList {
	    margin-top: scale(60px);
	    .item {
	      $g: scale(5%);
	      $w: calc((100% - 2 *#{$g}) / 3);
	      width: $w;
	      &:not(:last-child) {
	        margin-right: scale($g);
	      }
	      .imgBox {
	        height: scale(278px);
	      }
	      .content {
	        padding: scale(36px) scale(7px) scale(7px) 0;
	        .actTitle {
	          font-size: scale(20px);
	   
	        }
			}
	      }
	     
	  }
   
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
	  padding-top: scale(135px);
	  padding-bottom: scale(124px);
	  .homeMore {
	    margin-top: scale(35px);
	  }
	  .activityList {
	    margin-top: scale(85px);
	    .item {
	     $g: scale(5%);
	     $w: calc((100% - 2 *#{$g}) / 3);
	     width: $w;
	      &:not(:last-child) {
	        margin-right: scale($g);
	      }
	
	      .imgBox {
	       
	      
	        height: scale(310px);
	
	      }
	
	      .content {
	        padding: scale(36px) scale(7px) scale(7px) 0;
	
	        .actTitle {
	          font-size: scale(20px);
	   
	        }
			}
	      }
	     
	    }
    
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding-top: 40px;
    padding-bottom: 40px;
    .homeMore {
      margin-top: scale(35px);
    }
    .activityList {
      margin-top: 20px;
      flex-direction: column;
      .item {
        width: 100%;
        display: flex;
        flex-direction: row;
        &:not(:last-child){
          margin-bottom: 10px;
        }
        .imgBox {
          width: 120px;
          flex:0 0 120px;
          height: auto;
        }
        .content {
          padding: 0 10px;
          .actTitle {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
